/*
  汽车速度仪表盘
  Autho:devstone
  Email:kevinlq0912@163.com
  QQ:2313828706
*/
import QtQuick 2.0

Item {
    id: speedRoot
    width: parent.width
    height: parent.height

    //定义最中心圆半径
    //    property var m_radius: parent.height*0.04
    property var m_radius: Math.min(parent.width,parent.height)*0.056
    property var m_colorCenter: "#106EB4"
    property var m_unitName: "km/h"
    property var m_value: 80
    property var m_textColor: "#4896AE"
    property var m_scaleRadius: m_radius*4.6
    property var m_speedNum: [0,10,20,30,40,50,60,70,80,90,100,110,120,130,140,150,160]
    property var m_step: 10
    property var m_pointerRadius: m_radius*4.6

    //背景颜色
    Rectangle
    {
        id: background
        anchors.fill: canvas
        color: "#242834"
    }

    function updateSpeedPanel(value)
    {
        m_value = value;
        canvas.requestPaint();
    }

    Canvas
    {
        id: canvas
        width: parent.width
        height: parent.height

        onPaint:
        {
            var ctx = getContext("2d");

            drawSpeedPanel(ctx);
            ctx.restore();
        }

        function drawSpeedPanel(ctx)
        {
            var width = canvas.width
            var height = canvas.height
            //计算每一个刻度占的度数
            var perAngle = 300/((m_speedNum.length - 1) * m_step);

            ctx.clearRect(0,0,width,height);
            ctx.save();
            //将原点移到中心点,方便绘制
            ctx.translate(width/2,height/2);

            drawCenterCircle(ctx);
            drawUnitText(ctx);
            drawScale(ctx,m_speedNum,perAngle);
            drawPointer(ctx,m_value,perAngle);
            drawOutCircle(ctx);
        }

        //先画最中心圆
        function drawCenterCircle(ctx)
        {
            ctx.beginPath();
            var radial = ctx.createRadialGradient(0,0,m_radius*0.5,0,0,m_radius);
            radial.addColorStop(0,m_colorCenter);
            radial.addColorStop(1,"#6D8CA3");
            ctx.fillStyle = radial;
            ctx.arc(0,0,m_radius,0,Math.PI*2,false);
            ctx.fill();

            ctx.closePath();
        }

        //绘制单位以及速度值
        function drawUnitText(ctx)
        {
            //文字大小根据圆的半径自动调整,这里因为canvas没有设置文本字体大小属性，所以只能用字符串拼接了
            ctx.font = m_radius*1.4+ "px serif"
            ctx.textBaseline = "middle";
            ctx.fillStyle = m_textColor;

            //绘制上面的单位km/h
            ctx.fillText(m_unitName,-m_radius*1.2, -m_radius*2.4);
            //绘制下面的速度80
            ctx.fillText(m_value, -m_radius*0.6,m_radius*2.4);
        }

        //绘制刻度
        function drawScale(ctx,valueArry,perAngle)
        {
            var i = 0;
            //计算数组长度
            var length = valueArry.length - 1;
            //            ctx.rotate( rads(120) );
            for ( var deg = 0; deg <= length*m_step; deg++)
            {
                ctx.beginPath();
                var angle = -240 + perAngle*deg;
                var spotX = m_scaleRadius*Math.cos(rads(angle))
                var spotY = m_scaleRadius*Math.sin(rads(angle))
                var spot = m_radius *0.36;
                ctx.lineWidth = 1.2;
                if ( deg >= (length - 4)*m_step)
                {
                    ctx.fillStyle = "#E6F612"
                    ctx.strokeStyle = "#E6F612"
                }
                if ( deg >= (length - 2)*m_step)
                {
                    ctx.fillStyle = "#CA0B14"
                    ctx.strokeStyle = "#CA0B14"
                }

                if ( 0 == deg %10)
                {
                    ctx.lineWidth = 2.2
                    ctx.strokeStyle = m_textColor
                    spot = m_radius * 0.58
                    var textX = m_scaleRadius*1.24*Math.cos(rads(angle));
                    var textY = m_scaleRadius*1.24*Math.sin(rads(angle));
                    ctx.font = m_radius*0.66+"px Arial";
                    ctx.textBaseline = "middle";// 文字垂直对齐方式
                    ctx.textAlign = "center";   // 文字水平对齐方式
                    ctx.fillText(valueArry[i],textX,textY);
                    i++
                }
                if ( (0 == deg%5) && (0 != deg%10))
                {
                    ctx.lineWidth = 1.6
                    spot = m_radius * 0.48
                }

                var endX = (m_scaleRadius + spot )*Math.cos(rads(angle));
                var endY = (m_scaleRadius + spot )*Math.sin(rads(angle));

                ctx.moveTo(spotX,spotY);
                ctx.lineTo(endX,endY);
                ctx.stroke();
                ctx.closePath();
            }
        }

        //画指针
        function drawPointer(ctx,curValue,perAngle)
        {
            //计算当前的value所处的角度
            var transAngle = curValue*perAngle;
            //            console.log("transAngle:"+transAngle)
            //            console.log("perAngle:"+perAngle)
            ctx.save();
            ctx.beginPath();
            ctx.rotate(rads(120 + transAngle));
            //            ctx.globalAlpha = 0.5
            var gradient = ctx.createRadialGradient(0, 0, m_radius, 0, 0, m_pointerRadius*1.2);
            gradient.addColorStop(0, 'rgba(16,110,180,0.6)');
            gradient.addColorStop(0.5, 'rgba(21,165,174,0.8)');
            gradient.addColorStop(1,'rgba(30,130,139,1)');
            ctx.fillStyle = gradient;

            //设定指针夹角大小(这里是角度)，这里可以根据需要进行调整
            var angle = 40;
            //计算圆上点的坐标
            var point1 = getCircleCoordinate(m_radius,0,0,angle);
            var point2 = [m_pointerRadius,0];
            ctx.moveTo(point1[0],point1[1]);
            ctx.arc(0,0,m_radius,rads(angle),rads(-angle));
            ctx.lineTo(point2[0],point2[1]);
            ctx.lineTo(point1[0],point1[1]);
            ctx.fill();
            ctx.closePath();
            ctx.restore();
        }

        //画最外面的大圆
        function drawOutCircle(ctx)
        {
            ctx.beginPath();
            var radial = ctx.createRadialGradient(0,0,m_radius*7,0,0,m_radius*8.2);
            radial.addColorStop(0,"#244461");
            radial.addColorStop(0.5,"#265882");
            radial.addColorStop(1,"#2D628A");
            ctx.fillStyle = radial;
            ctx.arc(0,0,m_radius*7,0,Math.PI*2,false);
            ctx.arc(0,0,m_radius*8.2,Math.PI*2,false);
            ctx.fill();

            ctx.closePath();
        }

        //弧度转换
        function rads(x)
        {
            return Math.PI*x/180;
        }

        //圆
        function drawCircle(ctx,radius,bFill,fillStyle,bStroke,strokeStyle)
        {
            if ( bFill )
            {
                ctx.fillStyle = fillStyle;
                ctx.beginPath();
                ctx.moveTo(0,0);
            }
            if ( bStroke )
            {
                ctx.strokeStyle = strokeStyle;
                ctx.beginPath();
                ctx.moveTo(0 + radius,0);
            }
            ctx.arc(0,0,radius,0,Math.PI*2,false);
            ctx.closePath();
            if (bFill )
            {
                ctx.fill();
            }
            if ( bStroke )
            {
                ctx.stroke();
            }
        }

        /*
          求圆上任意一点的坐标
          已知圆的半径，圆心坐标，以及对应的角度
        */
        function getCircleCoordinate(radius,x,y,angle)
        {
            var point=[];
            var potX = x + radius * Math.cos( rads(angle));
            var potY = y + radius * Math.sin( rads (angle));

            point.push(potX);
            point.push(potY);

            return point;
        }
    }
}
